
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 动效</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-动效FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="动效 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link current">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>动效</h1>
    
    <p>FairyGUI不仅提供了静态UI的编辑功能，而且提供了强大的动效编辑功能，让你的UI可以轻松动起来。</p>
<h2 id="名称解释"><a href="#名称解释" class="headerlink" title="名称解释"></a>名称解释</h2><ul>
<li><p><code>时间轴</code> 元件一个属性的变化构成一条时间轴。例如一个组件，他的位置的变化可以成为一条时间轴。</p>
</li>
<li><p><code>帧</code> 时间轴由一个或多个帧做成。</p>
</li>
<li><p><code>关键帧</code> 时间轴上有很多帧，但不是所有帧都可以调整元件的属性。可以调整元件属性的帧叫“关键帧”。其他普通帧是自动生成的过渡。关键帧与普通帧在显示上的区别是中心多了个白点：<img src="../../images/20170808103109.png" alt>。</p>
</li>
<li><p><code>Tween</code> 在两个关键帧之间生成插值动画效果。Tween的显示为：<img src="../../images/20170808103354.png" alt>，即有一个箭头连接两个关键帧。</p>
</li>
</ul>
<h2 id="编辑动效"><a href="#编辑动效" class="headerlink" title="编辑动效"></a>编辑动效</h2><p>在动效列表视图，创建新动效或者双击某个动效后进入到动效编辑模式。</p>
<p>要退出动效编辑模式，点击舞台右上方的按钮：</p>
<p><img src="../../images/QQ20191212-093756.png" alt>。</p>
<p>在动效编辑时，不能增加和删除元件，不能修改控制器。如果当前帧的属性类型不是“改变位置”，那么无法移动元件；如果当前帧的属性类型“改变大小”，那么无法改变元件的大小。</p>
<p>在舞台上选中一个元件后（或不选中任何元件，在舞台空白处右键），从右键菜单中创建时间轴：</p>
<p><img src="../../images/QQ20191211-235703.png" alt></p>
<p>不同的元件可以创建的类型有所不同。</p>
<ul>
<li><code>改变位置</code> 改变元件的位置（x，y）。</li>
<li><code>改变大小</code> 改变元件的宽和高（width、height）。</li>
<li><code>改变透明度</code> 改变元件的透明度（alpha）。</li>
<li><code>改变旋转</code> 改变元件的旋转（rotation）。</li>
<li><code>改变缩放</code> 改变元件的缩放（scaleX，scaleY）。</li>
<li><code>改变倾斜</code> 改变元件的倾斜（skewX，skewY）。</li>
<li><code>改变颜色</code> 对图片、文字、装载器有效，改变它们的颜色（color）属性。</li>
<li><code>改变动画</code> 对动画、装载器有效，改变动画当前的播放状态（playing），或者设置当前帧（frame）。使用这个功能可以使动效轻松地和序列帧动画结合做复杂效果。</li>
<li><code>改变轴心</code> 改变元件的轴心（pivotX，pivotY）。一般来说，轴心应该设置为元件的固定属性，而不是在动效里临时改变。这里只是给出一个途径，使用的情景不多。</li>
<li><code>改变可见性</code> 改变元件的可见性（visible）。</li>
<li><code>播放动效</code> 对组件有效，播放该组件定义的一个动效。如果当前没有选中任何元件，则播放当前容器组件的一个动效。这可以实现类似于动效嵌套的功能。例如，如果动效中有一段效果是需要循环播放的，那我们可以把它做成单独一个动效，然后再用这里的方法嵌套进来。</li>
<li><code>播放声音</code> 播放一个音效。</li>
<li><code>播放震动</code> 元件显示一个震动效果。</li>
<li><code>改变颜色滤镜</code> 改变元件的颜色滤镜。</li>
<li><code>改变文本</code> 改变文本、标签、按钮、下拉框等这些带有标题属性的Text值。</li>
<li><code>改变图标</code> 改变装载器、标签、按钮、下拉框等这些带有图标属性的URL值。</li>
</ul>
<p><strong>注意：“组”支持的动效类型很少，如果需要复杂的动作，请改用组件。</strong></p>
<h2 id="动效属性"><a href="#动效属性" class="headerlink" title="动效属性"></a>动效属性</h2><p><img src="../../images/QQ20191212-001434.png" alt></p>
<ul>
<li><code>帧频</code> 可按需求选择24、30或60。编辑期时设定的帧频和最终的运行帧频并不相关，但更大的帧密度对制作更精细的动画有帮助。</li>
<li><code>忽略显示控制器影响</code> 勾选后，动效开始时所有参与此动效的元件不受显示控制器的控制，也就是不会被显示控制器隐藏。动效结束后恢复控制。</li>
<li><code>容器组件不可见时自动停止</code> 当组件移出舞台时，自动停止播放动效，节省CPU资源。</li>
<li><code>自动播放</code> 当组件被加到舞台时，自动开始播放动效。<ul>
<li><code>重复次数</code> 自动播放的重复次数。</li>
<li><code>延迟</code> 自动播放的延迟。单位秒。</li>
</ul>
</li>
</ul>
<h2 id="帧属性"><a href="#帧属性" class="headerlink" title="帧属性"></a>帧属性</h2><p><img src="../../images/QQ20191212-001552.png" alt></p>
<ul>
<li><p><code>标签</code> 设置帧的标签，一个任意的字符串，标识这个帧，用于代码里访问。</p>
</li>
<li><p><code>Tween</code> 勾选后从这个关键帧到下一个关键帧建立一个Tween。如果没有下一个关键帧，那么这个Tween是无效的。</p>
</li>
<li><p><code>缓动函数</code> 时间/速度曲线。详细请参考 <a href="../../images/20170802000005.jpg">图解</a> <a href="https://greensock.com/ease-visualizer" target="_blank" rel="noopener">示例</a>。</p>
</li>
<li><p><code>重复</code> 重复播放的次数。-1表示循环。</p>
</li>
<li><p><code>yoyo</code> 往返播放的效果。默认循环播放的效果是从起点到终点，然后又从起点到终点。勾选yoyo后，循环播放的效果是从起点到终点，再从终点到起点，依次类推。</p>
</li>
</ul>
<h2 id="帧数据"><a href="#帧数据" class="headerlink" title="帧数据"></a>帧数据</h2><p>不同的帧类型有不同的数据。这里只介绍改变位置一种类型。</p>
<p><img src="../../images/QQ20191212-001721.png" alt></p>
<ul>
<li><p><code>X</code> <code>Y</code> 修改关键帧的值。输入框前面的勾表示，如果不勾选，则不修改元件当前的属性值。</p>
<p>这里有一个关键点要注意。举个例子说明。当前元件的X是50，不勾选。动效结束时设置X为100，有勾选。则动效播放第一次时元件从50运动到100。动效播放第二次时，第一帧的X值是没有勾选的，也就是使用当前值，那就是100，那么动效的效果是从100运动到100，也就是看不到任何表现。这是动效的设计问题。这个勾选的功能一般只用在不参与动效的属性值。例如元件只做水平运动，那么可以不勾选Y，方便以后调整Y值时不影响动效。</p>
</li>
<li><p><code>使用百分比记录坐标</code> 用百分比方式记录坐标值。例如元件放置在容器水平中心时，x值就记录为50%。当进入到这帧时，无论容器的尺寸是多少，元件的坐标依然为中心即50%的位置。</p>
</li>
<li><p><code>使用引导线</code> 如果需要元件做曲线运动，那么可以勾选这个选项。</p>
</li>
</ul>
<p>引导线功能必须配合Tween使用，在Tween的开始关键帧勾选引导线功能。</p>
<p>通过以下两种方式进入编辑引导线模式：</p>
<ul>
<li>点击右侧图标 <img src="../../images/QQ20191212-093212.png" alt>。</li>
<li>双击舞台上的元件。</li>
</ul>
<p>通过以下三种方式退出编辑引导线模式：</p>
<ul>
<li>选中其他元件或其他关键帧。</li>
<li>双击舞台空白。</li>
<li>右键点击舞台空白，选择右键菜单中的“退出”。</li>
</ul>
<p>引导线编辑界面如下：</p>
<p><img src="../../images/QQ20191212-094415.png" alt></p>
<ol>
<li><p>路径点。可以按住路径点并拖动从而改变它的坐标，也可以在属性面板直接输入它的坐标：<br><img src="../../images/QQ20191212-100249.png" alt></p>
<p>增加路径点：右键点击舞台空白，在菜单中选择“增加点”；</p>
<p>删除路径点：右键点击路径点，在菜单中选择“删除点”。</p>
</li>
<li><p>控制点。可以按住控制点并拖动从而改变它的坐标，也可以在属性面板直接输入它的坐标。每个路径点都有两个控制点，他们之间用白线连接，拖动其中一个控制点时，另一个控制点也会同时移动，这种机制可以使曲线在这个点平滑变化。</p>
<p>如果需要取消这个平滑功能，在右键菜单中不勾选“平滑”：</p>
<p><img src="../../images/QQ20191212-094429.png" alt></p>
<p>这时再移动控制点，会发现两个控制台不再同时移动，这样曲线可以做较大的转折：</p>
<p><img src="../../images/QQ20191212-094654.png" alt></p>
</li>
</ol>
<h2 id="Transition"><a href="#Transition" class="headerlink" title="Transition"></a>Transition</h2><p>动效的播放在代码中启动，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">Transition trans = aComponent.GetTransition(“peng”);</span><br><span class="line">trans.Play();</span><br></pre></td></tr></table></figure>
<p>Play有多种原型，例如可以重复播放一定次数，可以在播放结束时回调等。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//结束时有一个回调，但需注意，如果动效里有嵌套的动效，或者有循环的内容，必须是等全部都结束后才会回调。</span></span><br><span class="line">trans.Play(callback);</span><br></pre></td></tr></table></figure>
<p>例如可以播放动效的一部分，通过指定时间范围，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//播放0.5秒-1.5秒部分的动效，即0.5秒（包含）-1.5秒（包含）之间的所有帧。</span></span><br><span class="line">trans.Play(<span class="number">1</span>, <span class="number">0</span>, <span class="number">0.5</span>, <span class="number">1.5</span>);</span><br></pre></td></tr></table></figure>
<p>时间范围可以硬编码，也可以通过标签指定，通过GetLabelTime可以获得某个标签所在时间点。</p>
<p>也可以倒着放，但要注意倒着放之前需要先执行一次正着放。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">trans.playReverse();</span><br></pre></td></tr></table></figure>
<p>动效可以暂停，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//暂停动效播放</span></span><br><span class="line">trans.setPaused(<span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//恢复动效播放</span></span><br><span class="line">trans.setPaused(<span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<p>要中途停止动效的播放，可以调用：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">trans.Stop();</span><br></pre></td></tr></table></figure>
<p>Stop方法也可以带参数，原型是：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">Stop</span>(<span class="params"><span class="keyword">bool</span> setToComplete, <span class="keyword">bool</span> processCallback</span>)</span>;</span><br></pre></td></tr></table></figure>
<p><code>setToComplete</code>表示是否将组件的状态设置到播放完成的状态，如果否，组件的状态就会停留在当前时间。<code>processCallback</code>是否调用Play方法传入的回调函数。</p>
<p>注意：UI动效播放完毕后，组件的状态将停留在最后一帧，而不是回到第一帧，如果你希望动效播放完后组件的状态复原到播放前，你需要最后添加一帧重新设置组件的状态。例如一个动效，设计是透明度经过1秒从1变到0，那么动效播放结束后透明度就是0。有人会问怎样才能让动效播放完了回到第一帧，也就是透明度要等于1，那很简单，在透明度时间轴最后加一帧，设置透明度为1，那么动效播放完了透明度就是1了。</p>
<p>如果需要修改某个关键帧的属性值，可以使用：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//例如某帧的标签为aa，这帧是设置某个元件的XY值的，将XY的数值改为100,200。</span></span><br><span class="line">trans.SetValue(<span class="string">"aa"</span>, <span class="number">100</span>, <span class="number">200</span>);</span><br></pre></td></tr></table></figure>
<p>可以修改某个Tween的持续时间，但修改某个Tween的时间<strong>不会</strong>使后续的Tween推迟。例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//修改某个Tween的持续时间为0.5秒。注意，标签应该定在Tween的开始关键帧上。</span></span><br><span class="line">trans.SetDuration(<span class="string">"aa"</span>, <span class="number">0.5f</span>);</span><br></pre></td></tr></table></figure>
<p>可以在动效运行到某帧时触发一个回调，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//运行到标签为aa的关键帧时，触发一个callback的回调。</span></span><br><span class="line">trans.SetHook(<span class="string">"aa"</span>, callback);</span><br></pre></td></tr></table></figure>
<p>可以修改动效某个标签对应动效片段的目标对象，但必须注意，<strong>要在动效停止状态下调用</strong>，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">trans.SetTarget(<span class="string">"aa"</span>, newTarget);</span><br></pre></td></tr></table></figure>
<p>在Unity中，动效的播放速度默认是不受Time.timeScale影响的，但你也可以设定它受影响：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">trans.ignoreEngineTimeScale = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>
<p>也可以单独设置动效的timeScale，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//动效播放的速度将会是原来的一半。</span></span><br><span class="line">trans.timeScale = <span class="number">0.5f</span>;</span><br></pre></td></tr></table></figure>
    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/transition.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
